<!--
 * @Author: jiutian
 * @Date: 2023-01-31 11:05:32
 * @LastEditTime: 2023-02-06 17:07:26
 * @LastEditors:  
-->
<script setup lang="ts">
import { ref, reactive, onBeforeMount, Ref, onMounted } from "vue";
import scrollList from "@/components/scrollList.vue";
import request from "@api";
import { useRouter } from "vue-router";

const $router = useRouter();

let list = reactive({
  key: [],
});
let listQuery = reactive({
  pageSize: 10,
  pageNum: 1,
});

let total: Ref<Number> = ref(0);
let scrollListRef = ref(null);
let finished = ref(false);

function getBlodList(isSend?: boolean) {
  request["check/getBlogList"]({ params: listQuery }).then((res: any) => {
    if (res.code == 200) {
      list.key = [...list.key, ...res.data.list];
      listQuery.pageNum = res.data.pageNum;
      listQuery.pageSize = res.data.pageSize;
      if (res.data.total <= list.key.length) {
        finished.value = true;
      }
      if (isSend) {
        scrollListRef.value.isSend = false;
      }
    }
  });
}

function getData() {
  listQuery.pageNum++;
  getBlodList(true);
}

function toBolgDetail(item: any) {
  $router.push({
    name: "blogDetail",
    params: {
      id: item.id,
    },
  });
}

onBeforeMount(() => {
  getBlodList();
});
</script>

<template>
  <div class="home">
    <scrollList
      ref="scrollListRef"
      :list="list.key"
      :finished="finished"
      @get-data="getData"
    >
      <template #item="{ row }">
        <div class="item" @click="toBolgDetail(row)">
          <div class="blog_title">{{ row.blogTitle }}</div>
          <div class="blog_context">{{ row.blogText }}</div>
          <div class="bottom_tool">
            <div class="publish">
              来源：{{ row.username || row.phoneNumber }}
            </div>
            <div class="create_time">时间：{{ row.createTime }}</div>
            <div class="views">浏览：{{ row.views }}次</div>
          </div>
        </div>
      </template>
    </scrollList>
  </div>
</template>

<style lang="scss" scoped>
.home {
  //   padding: 20px;
  .item {
    // padding: 10px 30px;
    padding-bottom: 10px;

    border-bottom: 1px solid #ededed;
    .blog_title {
      font-size: 18px;
      line-height: 24px;
      font-weight: bold;
    }
    .blog_context {
      margin: 5px 0;
      color: rgba(0, 0, 0, 0.8);
      text-indent: 2em;
      font-size: 14px;
      line-height: 18px;
      height: 36px;

      text-overflow: -o-ellipsis-lastline;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical; //盒子中内容竖直排列
    }
    .bottom_tool {
      display: flex;
      justify-content: space-around;
      font-size: 14px;
      color: #999;
    }
  }
}
</style>